<template>
    <div class="globalContainer">
        <div class="headerSection">
            <h1>OUR OFFICES</h1>
            <p>
                Our global teams are home to individuals from over 40 nationalities. We believe in transparency, open
                communication and spending time with one another. While all teams have their own unique traits, it's the
                underlying culture, shared values and love for games that keep us together.
            </p>
            <RouterLink to="/careers/our-offices">
                OUR OFFICES »
            </RouterLink>
        </div>
        <div class="mapArea">
            <img src="/src/assets/img/careers/index/globalBack.webp" alt="世界地图">
            <div
                v-for="(office, index) in offices"
                :key="index"
                class="officeLocation"
                :style="{ left: office.left + '%', top: office.top + '%' }"
            >
                <span class="officeName">{{ office.name }}</span>
                <div class="hotspot" :style="{ 'animation-delay': office.delay + 's' }"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
const offices = [
    {name: 'San Francisco, USA', left: 9.8, top: 33.4, delay: 0},
    {name: 'London, UK', left: 43.7, top: 11.7, delay: 1},
    {name: 'Helsinki, Finland', left: 47.4, top: 8.5, delay: 2},
    {name: 'Shanghai, China', left: 71.2, top: 34.9, delay: 3},
    {name: 'Seoul, Korea', left: 80.5, top: 20.7, delay: 4}
];
</script>

<style scoped>
.globalContainer {
    background-color: #000;
    overflow: hidden;
    padding: 4% 0;
}

.headerSection {
    margin: 0 auto;
    width: 50%;
    color: #fff;
    padding-bottom: 64px;
}

.headerSection h1 {
    font-size: 45px;
    margin-top: 37px;
    margin-bottom: 21px;
    text-align: center;
}

.headerSection p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.5;
}

.headerSection a {
    font-size: 14px;
    font-weight: bold;
    color: rgb(251, 74, 157);
    text-decoration: none;
}

.mapArea {
    position: relative;
    margin: 0 auto;
    width: 70%;
    height: 70%;
}

.mapArea img {
    width: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.officeLocation {
    position: absolute;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.officeName {
    font-size: 16px;
    font-weight: bold;
    color: #fb4a9d;
}

.hotspot {
    width: 7px;
    height: 7px;
    background-color: #fb4a9d;
    box-shadow: 0 0 10px 5px #fb4a9d80;
    border-radius: 50%;
    animation: blink 2s infinite;
    margin-top: 5px;
}

@keyframes blink {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
</style>